/*
 * @Descripttion:
 * @version: 1.0.0
 * @Author: Shentong
 * @Date: 2021-04-09 12:34:34
 * @LastEditors: Shentong
 * @LastEditTime: 2021-09-24 13:50:49
 */
 import React, { useEffect, useState } from "react";
 import { View, Image} from "@tarojs/components";

 import styles from './index.module.scss'

 const Category = (props) => {
   const { list = [], clickItem = () => {} } = props
   const [categoryList, setCategoryList] = useState<Array<any>>([]);
   const [tabIndex, setTabIndex] = useState<Number>(0);

   const categoryItemClick: Function = (index: Number, categoryItem: any) => {
    setTabIndex(index);
    clickItem(categoryItem)
  };

   useEffect(() => {
    setCategoryList([...list])
   }, [list]);

   return (
     <View className={`${styles.categoryCtn} ${categoryList.length ? styles.hasContent : null}`}>
      <View className={styles.noScrollBar}>
        <View className={styles.navList}>
          {categoryList.map((categoryItem, index) => {
            return (
              <View
                key={categoryItem.cateId}
                className={`${styles.category} ${index === tabIndex ? styles.active : null}`}
                onClick={() => categoryItemClick(index, categoryItem)}
              >
                <Image className={styles.categoryImg} src={categoryItem.imageUrl} mode='aspectFit' />
                <View className={styles.categoryName}>
                  <View className={styles.name}>{categoryItem.cateName}</View>
                  <View className={styles.borderLine}></View>
                </View>
              </View>
            );
          })}
        </View>
      </View>
     </View>
   );
 }

 export default Category
